<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <title>统一认证登录</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">

    <link rel="stylesheet" type="text/css" th:href="@{/plugins/cloud-admin/css/cloud-admin.css}">
    <link rel="stylesheet" type="text/css" href="/webjars/bootstrap/css/bootstrap.css" th:href="@{/webjars/bootstrap/css/bootstrap.css}"/>
    <!-- Font Awesome -->
    <link rel="stylesheet" type="text/css" href="/webjars/font-awesome/css/fontawesome.min.css" th:href="@{/webjars/font-awesome/css/fontawesome.min.css}">
    <link rel="stylesheet" type="text/css" href="/webjars/font-awesome/css/solid.min.css" th:href="@{/webjars/font-awesome/css/solid.min.css}">
    <link rel="stylesheet" type="text/css" href="/webjars/font-awesome/css/v4-font-face.min.css" th:href="@{/webjars/font-awesome/css/v4-font-face.min.css}">
    <!-- UNIFORM -->
    <link rel="stylesheet" type="text/css" href="/webjars/uniform/themes/default/css/uniform.default.min.css" th:href="@{/webjars/uniform/themes/default/css/uniform.default.min.css}"/>
    <!-- ANIMATE -->
    <link rel="stylesheet" type="text/css" href="/webjars/animate.css/animate.min.css" th:href="@{/webjars/animate.css/animate.min.css}"/>

    <style>
        #vrifyCodeImg {
            display: block;
            width: 100%;
            height: 34px;
            vertical-align: middle;
        }
    </style>
</head>
<body class="login">
<!-- PAGE -->
<section id="page">
    <!-- HEADER -->
    <header>
        <!-- NAV-BAR -->
        <div class="container">
            <div class="row">
                <div class="col-md-4 col-md-offset-4">
                    <div id="logo">
                        <a href="index.html"><img th:src="@{/plugins/cloud-admin/img/logo/logo.png}" height="40" alt="logo name"/></a>
                    </div>
                </div>
            </div>
        </div>
        <!--/NAV-BAR -->
    </header>
    <!--/HEADER -->
    <!-- LOGIN -->
    <section id="login_bg" class="visible">
        <div class="container">
            <div class="row">
                <div class="col-md-4 col-md-offset-4">
                    <div id="login-input" class="login-box">
                        <h2 class="bigintro">账号登录</h2>
                        <div class="divide-40"></div>
                        <div th:if="${message} != null" class="alert alert-block alert-danger">
                            <p th:inline="text">[[${message}]]</p>
                        </div>
                        <form id="form" role="form">
                            <div class="form-group">
                                <label for="tank">用户名</label>
                                <i class="fa fa-user"></i>
                                <input type="text" class="form-control" name="tank" id="tank">
                            </div>
                            <div class="form-group">
                                <label for="fighter">密码</label>
                                <i class="fa fa-lock"></i>
                                <input type="password" class="form-control" name="fighter" id="fighter">
                            </div>
                            <div th:if="${hide_verification_code} == false" class="form-group">
                                <div class="row">
                                    <div class="col-md-7">
                                        <label for="missile">验证码</label>
                                        <i class="fa fa-qrcode"></i>
                                        <input type="text" class="form-control" name="missile" id="missile">
                                    </div>
                                    <div class="col-md-5">
                                        <label for="vrifyCodeImg">&nbsp;</label>
                                        <img id="vrifyCodeImg" src="" onclick="refresh()" alt="点击刷新" style="margin: 0px"/>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <form id="login-form" role="form" th:action="@{/login}" method="POST">
                            <div>
                                <input type="hidden" id="symmetric" name="symmetric" th:value="${soup_spoon}">
                                <input type="hidden" id="verification_category" name="verification_category" th:value="${verification_category}">
                                <input type="hidden" th:name="${vulgar_tycoon}" th:id="${vulgar_tycoon}">
                                <input type="hidden" th:name="${beast}" th:id="${beast}">
                                <input type="hidden" th:name="${graphic}" th:id="${graphic}">
                                <th:block th:each="map : ${hidden_inputs}">
                                    <input th:name="${map.key}" type="hidden" th:value="${map.value}"/>
                                </th:block>
                            </div>
                            <div>
                                <label class="checkbox">
                                    <input type="checkbox" class="uniform" value="true" th:name="${anubis}" th:id="${anubis}">下次自动登录
                                </label>
                                <button id="disco" type="button" class="btn btn-danger">登录</button>
                            </div>
                        </form>
                        <!-- SOCIAL LOGIN -->
                        <div class="divide-20"></div>
<!--                        <div class="center">-->
<!--                            <strong>第三方账号登录</strong>-->
<!--                        </div>-->
<!--                        <div class="divide-20"></div>-->
<!--                        <div class="social-login center">-->
<!--                            <a class="btn btn-primary btn-lg">-->
<!--                                <i class="fa fa-facebook"></i>-->
<!--                            </a>-->
<!--                            <a class="btn btn-info btn-lg">-->
<!--                                <i class="fa fa-twitter"></i>-->
<!--                            </a>-->
<!--                            <a class="btn btn-danger btn-lg">-->
<!--                                <i class="fa fa-google-plus"></i>-->
<!--                            </a>-->
<!--                        </div>-->
                        <!-- /SOCIAL LOGIN -->
                        <div class="login-helpers">
                            <a href="#" onclick="swapScreen('forgot_bg');return false;">忘记密码?</a> <br> 还没有系统账号?
<!--                            <a href="#" onclick="swapScreen('register_bg');return false;">立即注册!</a>-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--/LOGIN -->
    <!-- REGISTER -->
<!--    <section id="register_bg" class="font-400">-->
<!--        <div class="container">-->
<!--            <div class="row">-->
<!--                <div class="col-md-4 col-md-offset-4">-->
<!--                    <div class="login-box">-->
<!--                        <h2 class="bigintro">Register</h2>-->
<!--                        <div class="divide-40"></div>-->
<!--                        <form role="form">-->
<!--                            <div class="form-group">-->
<!--                                <label for="exampleInputName">Full Name</label>-->
<!--                                <i class="fa fa-font"></i>-->
<!--                                <input type="text" class="form-control" id="exampleInputName">-->
<!--                            </div>-->
<!--                            <div class="form-group">-->
<!--                                <label for="exampleInputUsername">Username</label>-->
<!--                                <i class="fa fa-user"></i>-->
<!--                                <input type="text" class="form-control" id="exampleInputUsername">-->
<!--                            </div>-->
<!--                            <div class="form-group">-->
<!--                                <label for="exampleInputEmail1">Email address</label>-->
<!--                                <i class="fa fa-envelope"></i>-->
<!--                                <input type="email" class="form-control" id="exampleInputEmail2">-->
<!--                            </div>-->
<!--                            <div class="form-group">-->
<!--                                <label for="exampleInputPassword1">Password</label>-->
<!--                                <i class="fa fa-lock"></i>-->
<!--                                <input type="password" class="form-control" id="exampleInputPassword1">-->
<!--                            </div>-->
<!--                            <div class="form-group">-->
<!--                                <label for="exampleInputPassword2">Repeat Password</label>-->
<!--                                <i class="fa fa-check-square-o"></i>-->
<!--                                <input type="password" class="form-control" id="exampleInputPassword2">-->
<!--                            </div>-->
<!--                            <div>-->
<!--                                <label class="checkbox"> <input type="checkbox" class="uniform" value=""> I agree to the-->
<!--                                    <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a></label>-->
<!--                                <button type="submit" class="btn btn-success">Sign Up</button>-->
<!--                            </div>-->
<!--                        </form>-->
<!--                        &lt;!&ndash; SOCIAL REGISTER &ndash;&gt;-->
<!--                        <div class="divide-20"></div>-->
<!--                        <div class="center">-->
<!--                            <strong>Or register using your social account</strong>-->
<!--                        </div>-->
<!--                        <div class="divide-20"></div>-->
<!--                        <div class="social-login center">-->
<!--                            <a class="btn btn-primary btn-lg">-->
<!--                                <i class="fa fa-facebook"></i>-->
<!--                            </a>-->
<!--                            <a class="btn btn-info btn-lg">-->
<!--                                <i class="fa fa-twitter"></i>-->
<!--                            </a>-->
<!--                            <a class="btn btn-danger btn-lg">-->
<!--                                <i class="fa fa-google-plus"></i>-->
<!--                            </a>-->
<!--                        </div>-->
<!--                        &lt;!&ndash; /SOCIAL REGISTER &ndash;&gt;-->
<!--                        <div class="login-helpers">-->
<!--                            <a href="#" onclick="swapScreen('login_bg');return false;"> Back to Login</a> <br>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--    </section>-->
    <!--/REGISTER -->
    <!-- FORGOT PASSWORD -->
    <section id="forgot_bg">
        <div class="container">
            <div class="row">
                <div class="col-md-4 col-md-offset-4">
                    <div class="login-box">
                        <h2 class="bigintro">Reset Password</h2>
                        <div class="divide-40"></div>
                        <form role="form">
                            <div class="form-group">
                                <label for="exampleInputEmail1">Enter your Email address</label>
                                <i class="fa fa-envelope"></i>
                                <input type="email" class="form-control" id="exampleInputEmail1">
                            </div>
                            <div>
                                <button type="submit" class="btn btn-info">Send Me Reset Instructions</button>
                            </div>
                        </form>
                        <div class="login-helpers">
                            <a href="#" onclick="swapScreen('login_bg');return false;">Back to Login</a> <br>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- FORGOT PASSWORD -->
</section>
<!--/PAGE -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- JQUERY -->
<script type="text/javascript" src="/webjars/jquery/jquery.min.js" th:src="@{/webjars/jquery/jquery.min.js}"></script>
<!-- BOOTSTRAP -->
<script type="text/javascript" src="/webjars/bootstrap/js/bootstrap.bundle.min.js" th:src="@{/webjars/bootstrap/js/bootstrap.bundle.min.js}"></script>
<!-- BACKSTRETCH -->
<script type="text/javascript" src="/webjars/jquery-backstretch/jquery.backstretch.min.js" th:src="@{/webjars/jquery-backstretch/jquery.backstretch.min.js}"></script>
<!-- UNIFORM -->
<script type="text/javascript" src="/webjars/uniform/jquery.uniform.min.js" th:src="@{/webjars/uniform/jquery.uniform.min.js}"></script>
<!-- CUSTOM SCRIPT -->
<script type="text/javascript" th:src="@{/plugins/cloud-admin/js/script.js}"></script>
<!-- CUSTOM SCRIPT -->
<script type="text/javascript" th:src="@{/herodotus/common.js}"></script>
<!-- CRYPTO-JS -->
<script type="text/javascript" th:src="@{/plugins/crypto-js/rollups/aes.js}"></script>
<script type="text/javascript" th:src="@{/plugins/crypto-js/components/mode-ecb-min.js}"></script>
<!-- SECURITY-JS -->
<script type="text/javascript" th:src="@{/herodotus/security/system-security.js}"></script>

<script type="text/javascript">

    let verification_category = '[[${verification_category}]]';

    window.onload = function() {
        $.SECURITY.informations();
        loadCaptcha();
    };

    function login() {

        let tank = $('#tank').val();
        let fighter = $('#fighter').val();
        let missile = $('#missile').val();
        let symmetric = $('#symmetric').val();

        let data =  $.SECURITY.encryptFormData(tank, fighter, missile, symmetric)

        let vulgarTycoon = '#' + '[[${vulgar_tycoon}]]';
        let beast = '#' + '[[${beast}]]';
        let graphic = '#' + '[[${graphic}]]';

        $(vulgarTycoon).val(data.encryptTank);
        $(beast).val(data.encryptFighter);
        $(graphic).val(data.encryptMissile);

        $('#login-form').submit();
    }

    function loadCaptcha() {
        let url = '[[${contextPath}]]/open/captcha'
        let sessionId = '[[${sessionId}]]';
        $.http.get(url, {identity:sessionId, category: verification_category}, 'json')
            .then(result => {
                let src = result.data.graphicImageBase64;
                $('#vrifyCodeImg').attr('src', src);
            })
            .catch(error => {
                $.information.error(error);
            });
    }

    function refresh() {
        // let src = '[[${contextPath}]]/defaultKaptcha?d='+new Date()*1;
        // $('#vrifyCodeImg').attr('src', src);
        loadCaptcha();
    }

    function swapScreen(id) {
        jQuery('.visible').removeClass('visible animated fadeInUp');
        jQuery('#'+id).addClass('visible animated fadeInUp');
    }

    $('#disco').click(function () {
        login();
    });

    jQuery(document).ready(function() {

        $.backstretch([
            "[[${contextPath}]]/plugins/cloud-admin/img/login/1.jpg"
            , "[[${contextPath}]]/plugins/cloud-admin/img/login/2.jpg"
            , "[[${contextPath}]]/plugins/cloud-admin/img/login/3.jpg"
            , "[[${contextPath}]]/plugins/cloud-admin/img/login/4.jpg"
        ], {duration: 3000, fade: 750});

        App.setPage("login_bg");  //Set current page
        App.init(); //Initialise plugins and elements
    });

    jQuery(document).keydown(function (event) {
        if (event.keyCode === 13) {
            $('#disco').click();
        }
    });
</script>
</body>
</html>